<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../res/css/weui.css" />
  <link rel="stylesheet" href="../res/css/weuix.css" />
  <link rel="stylesheet" href="../res/css/common.css">
  <script src="../res/js/zepto.min.js"></script>
  <script src="../res/js/zepto.weui.js"></script>
  <script src="../res/js/common.js?v=2"></script>
  <!-- <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> -->
  <script type="text/javascript">
    var user_card_type = 0 , userinfo,ossdata=[];

    // 判断证件型号
    function card_type(type) {
      if (type == 0) {
        return '居民身份证';
      } else if (type == 1) {
        return '居民户口簿';
      } else if (type == 2) {
        return '护照';
      } else if (type == 3) {
        return '军官证';
      } else if (type == 4) {
        return '驾驶证';
      } else if (type == 5) {
        return '港澳居民来往内地通行证';
      } else if (type == 6) {
        return '台湾居民来往内地通行证';
      } else if (type == 7) {
        return '其他';
      } else {
        return '居民身份证';
      }
    }

    // 判断有无证件号码 如有则不可修改
    function isChangeIdCard(num) {
      if (num) {
        // $('#user_cardNumber').attr({
        //   'readonly': 'true'
        // })
        $('#card_type').css({
          'pointer-events': 'none'
        });
      }
    }
    //保存修改
    function saveChange() {
      var user_img, user_document_type, user_nickname, user_name, user_phone, user_document_number;
      user_nickname = $('#user_nickName').val();
      user_name = $('#user_name').val();
      user_document_number = $('#user_cardNumber').val()
       if (!IsIdCard(user_document_number) && !isChengDu) {
        msgInfo('请输入正确身份证');
          return;
      }
      if ((!user_nickname || !user_name) && isChengDu) {
        msgInfo('请输入昵称或姓名');
          return;
      }
      // -------------------4.10
      var paramJson = {
        'userNickname': user_nickname,
        'trueName': user_name,
        'userDocumentNumber': user_document_number
      }
      newAjaxPost("/h5/userInfo/updateUserInfo", paramJson, doSavePatSuccess);
    // -----------------
    }
    function doSavePatSuccess(res) {
		if(res.code == 1){
			msgInfo('保存成功');
			setTimeout(function(){goPage("inquiry_user_personal.htm")},1000);
		}else{
			msgInfo(res.msg);
		}
    }

    $(function () {
		//获取用户信息
		newGetInfo()
		//获取oss参数
		newOssPolicy()
		// 后退    
		$('#btnBack').on('click', function () {
			goPageNo(-1);
		})
		
		// 证件选择
		$("#card_type").select({
			title: "请选择证件类型",
			items: ['居民身份证', '居民户口簿', '护照', '军官证', '驾驶证', '港澳居民来往内地通行证', '台湾居民来往内地通行证', '其他'],
			onChange: function (d) {
				console.log(this, d);
				if (d.values == '居民身份证') {
					user_card_type = '0'
				} else if (d.values == '居民户口簿') {
					user_card_type = '1'
				} else if (d.values == '护照') {
					user_card_type = '2'
				} else if (d.values == '军官证') {
					user_card_type = '3'
				} else if (d.values == '驾驶证') {
					user_card_type = '4'
				} else if (d.values == '港澳居民来往内地通行证') {
					user_card_type = '5'
				} else if (d.values == '台湾居民来往内地通行证') {
					user_card_type = '6'
				} else if (d.values == '其他') {
					user_card_type = '7'
				}
			}
		});
		//选择上传文件
		$("#uploaderInput").on('change', function () {
			getFile(ossdata);//执行getFile()函数向阿里云上传文件
		});
    })
	
	function newGetInfo(){
		newAjaxPost("/h5/userInfo/userInfo", {}, newGetInfoOk);
	}
	function newGetInfoOk(jsonInfo){
		if(jsonInfo.code == 1){
			var nickname,userimg;
			if(jsonInfo.data.userImg){
				userimg = jsonInfo.data.userImg
			}else{
				userimg = '../res/images/userImg.png'
			}
			if(jsonInfo.data.userNickname){
				nickname = jsonInfo.data.userNickname
			}else{
				nickname = ''
			}
			$('#image').attr({'src': userimg});
			$('#user_nickName').val(nickname)
			$('#user_name').val(jsonInfo.data.trueName)
			$('#user_phone').val(jsonInfo.data.mobile)
			$('#card_type').val(card_type(jsonInfo.data.documentType))
			$('#user_cardNumber').val(jsonInfo.data.userDocumentNumber)
			isChangeIdCard(jsonInfo.data.userDocumentNumber);
		}
	}
	
	function newOssPolicy(){
		newAjaxPost("/h5/oss/ossPolicy", {}, newOssPolicyOk);
	}
	function newOssPolicyOk(jsonInfo){
		if(jsonInfo.code == 1){
			ossdata=jsonInfo.data
		}
	}
	
	// getSuffix() 方法用于获取文件名的后缀
	var getSuffix = function (fileName) {
		var pos = fileName.lastIndexOf(".");
		var suffix = '';
		if (pos != -1) {
			suffix = fileName.substring(pos);
		}
		return suffix;
	};
	// getFile() 方法用于获取文件并且上传图片
	function getFile(obj) {
		//获取文件路径
		var file = $("#uploaderInput").val();
		//创建一个空对象实例
		var formData = new FormData();
		//获取当前时间戳加上获取的文件后缀 为文件名
		var filename = new Date().getTime() + getSuffix(file);
		var str=filename.substring(filename.length - 4);
		if(str!='.gif'&&str!='jpeg'&&str!='.jpg'&&str!='.png'){
			msgInfo('请上传图片格式的文件！')
			return
		}
		//注意formData里append添加的键的大小写
		formData.append('key', obj.dir + filename); //存储在oss的文件路径
		formData.append('OSSAccessKeyId', obj.accessid); //accessKeyId
		formData.append('policy', obj.policy); //policy
		formData.append('Signature', obj.signature); //签名
		formData.append('callback', obj.callback); //签名
		//如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
		formData.append("file", $("#uploaderInput")[0].files[0]);
		formData.append('success_action_status', 200); //成功后返回的操作码
		var fileUrl = obj.host + '/' + 'ceshi/' + filename;
		$.ajax({
			type:'POST',
			data:formData,
			processData:false,//这里默认为true,必须手动改为false
			contentType:false,//这里必须手动改为false,避免出现解析错误
			cache: false,//缓存必须改为false,保证每次都能读取最新数据
			url:obj.host,
			success:function (res) {
				if(res.code==1){		//上传成功
					// msgInfo('图片上传成功');
					newUpdateUserHeadImg(res.data)
				}
			},
			error:function (error) {
				console.log(error);//文件上传失败打印错误信息
			}
		})
	};
	function newUpdateUserHeadImg(data){
		newAjaxPost("/h5/userInfo/updateUserHeadImg", {"userImg": data.filename}, newUpdateUserHeadImgOk);
	}
	function newUpdateUserHeadImgOk(jsonInfo){
		if(jsonInfo.code == 1){
			msgInfo('图片保存成功');
			newGetInfo()
		}
	}
  </script>
</head>
  <style type="text/css">
    #portrait_img {
      border-radius: 50%;
      overflow: hidden;
      width: 2rem;
      height: 2rem;
    }

    section>div {
      background: white;
      margin: 10px;
      border-radius: 5px;
    }


    #user_nickName,
    #user_phone,
    #user_cardNumber,
    #user_name,
    #card_type {
      font-size: 16px;
      border: none;
      outline: none;
      text-align: right;
    }

    .weui-cell__ft {
      color: black;
    }

    .weui-cell__bd {
      font-weight: bold;
    }

    section>p {
      color: red;
      font-size: 13px;
      padding-left: 5px;
    }
	section .weui-btn_primary{
		background-color: #1189FF;
		color: #FFFFFF;
	}
  </style>
<body ontouchstart style="background: #F9F8FE;">
  <div class="fixed-top">
    <div class="weui-btn_primary weui-header">
      <div class="weui-header-left"><a id="btnBack" class="icon icon-109"></a></div>
      <h1 class="weui-header-title">个人信息</h1>
    </div>
  </div>
  <section>
    <div class="weui-cell portrait">
      <div class="weui-cell__bd">
        <p>头像</p>
      </div>
      <div id="portrait_img" class="weui-cell__ft">
        <img id="image" width="100%" src="../res/images/head_icon.png" />
        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" >
      </div>
      <div class="weui-cell__ft"><i class="icon icon-108"></i></div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <p>昵称</p>
      </div>
      <div class="weui-cell__ft"><input id="user_nickName" type="text" placeholder="请输入昵称"></div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <p>姓名</p>
      </div>
      <div class="weui-cell__ft"><input id="user_name" type="text" placeholder="请输入姓名"></div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <p>手机号</p>
      </div>
      <div class="weui-cell__ft"><input id="user_phone" type="text" placeholder="请输入手机号" disabled="disabled" style="background-color:#fff"></div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <p>证件类型</p>
      </div>
      <div class="weui-cell__ft">
        <input style="text-align: right;" class="weui-input" id="card_type" type="text" value="居民身份证" readonly=""
          data-values="0" disabled="disabled">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <p>证件号码</p>
      </div>
      <div class="weui-cell__ft"><input id="user_cardNumber" type="text" placeholder="请输入证件号"></div>
    </div>
    <!-- <p>注意：证件号一经填写无法修改，请慎重填写</p> -->
    <a style="margin:20px;" href="javascript:;" class="weui-btn weui-btn_primary" id="change_save"
      onclick="saveChange()">保存修改</a>
  </section>
  <!-- <input type="file" class="test" accept="image/gif,image/jpeg,image/jpg,image/png"> -->
</body>

</html>